import * as THREE from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export const draw = async (container: HTMLDivElement) => {
    //渲染一个平面长方体，作为地面
    let ground = new THREE.PlaneGeometry(800, 800), groundMaterial = new THREE.MeshLambertMaterial({
        color: '#000',
        side: THREE.DoubleSide
    }), groundMesh = new THREE.Mesh(ground, groundMaterial);
    //引入汽车模型
    let fbxLoader = new FBXLoader(), textureLoader = new THREE.TextureLoader();
    let carModel = await fbxLoader.loadAsync('/models/car/car.fbx'),
        picture = await textureLoader.loadAsync('/models/car/0.jpeg'),
        bumpPic = await textureLoader.loadAsync('/models/car/1.png');
    carModel.scale.set(.3, .3, .3)
    carModel.position.set(0, 0, 0)
    carModel.rotateX(Math.PI / 2)
    carModel.traverse((child: unknown) => {
        if (child instanceof THREE.Mesh) {
            let material = new THREE.MeshPhongMaterial({
                map: picture,
                specularMap: bumpPic,
                specular: 0xffffff,
                shininess: 100,
                side:THREE.DoubleSide
            })
            child.material = material
        }
    })
    //画出车位得形状
    // let parkLot = new THREE.Group();
    let outLine = new THREE.Shape()
    outLine.moveTo(0, 0);
    outLine.lineTo(0, 200);
    outLine.lineTo(100, 200);
    outLine.lineTo(100, 0);
    outLine.lineTo(0, 0);
    let innerLine = new THREE.Path();
    innerLine.moveTo(10, 10);
    innerLine.lineTo(10, 190);
    innerLine.lineTo(90, 190);
    innerLine.lineTo(90, 10);
    innerLine.lineTo(10, 10);
    outLine.holes.push(innerLine)
    let lot = new THREE.ShapeGeometry(outLine),
        lotMaterial = new THREE.MeshPhongMaterial({
            color: '#ffff00',
            side: THREE.DoubleSide
        })
    lot.center()
    let lotMesh = new THREE.Mesh(lot, lotMaterial);
    lotMesh.position.set(-700,340,0)
    // parkLot.add(lo)
    let scene = new THREE.Scene()
    scene.add(carModel)
    scene.add(groundMesh)
    scene.add(lotMesh)
    //辅助坐标系统
    let axesHelper = new THREE.AxesHelper(500)
    scene.add(axesHelper)
    //点光源
    let point = new THREE.PointLight(0xffffff, 1);
    point.position.set(100, 100, 100); //点光源位置
    scene.add(point); //点光源添加到场景中
    //定义动画 模拟车子跑
    let posTrack = new THREE.KeyframeTrack(
        `${carModel.name}.position`,
        [0, 10],
        [0, 0, 0, lotMesh.position.x, lotMesh.position.y, 100]
    ),
        rotTrack = new THREE.KeyframeTrack(`${carModel.name}.rotation[z]`, [0, 10], [0, -Math.PI])
    let clip = new THREE.AnimationClip("default", 20, [
        posTrack, rotTrack
    ]);
    // carModel.position.set(3,3,3)
    // carModel.rotation.set(3,3,3)
    let mixer = new THREE.AnimationMixer(carModel);
    var AnimationAction = mixer.clipAction(clip);
    AnimationAction.timeScale = 10;
      AnimationAction.time = 10
    AnimationAction.play();
    AnimationAction.loop = THREE.LoopRepeat;
    //暂停在最后一帧播放的状态
    AnimationAction.clampWhenFinished = true;
    //   carModel.rotation.set(0,0,Math.PI/2)
    //环境光
    let ambient = new THREE.AmbientLight(0x404040, 2);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    let width = window.innerWidth; //窗口宽度
    let height = window.innerHeight; //窗口高度
    let k = width / height; //窗口宽高比
    let s = 10; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(0, 0, 800); //设置相机位置
    camera.up.y = 0
    camera.up.z = 1
    camera.up.x = 0
    camera.lookAt(groundMesh.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    let renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height - 91); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    container.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    var clock = new THREE.Clock();
    function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
        mixer.update(clock.getDelta());
    }
    let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
    controls.addEventListener("change", render); //监听鼠标、键盘事件
    render()
}